#{extends 'main.html' /}

#{navigation /}

<script type="text/javascript" charset="${_response_encoding}">
	
	var lastComment = 0;
	
	//this function generates an url looking like this: '/lectures/getNewComments?lectureId=x&commentId=y'
	//the route has to be added to the routes-file
	var lastCommentAction = #{jsAction @getNewComments(':lectureId', ':commentId') /}
	var deleteCommentAction = #{jsAction @deleteComment(':lectureId', ':commentId') /}
	var addNewCommentAction = #{jsAction @addComment(':lectureId', ':content') /}
	
	//Load all comments with an id higher than commentId
	function displayComments() {
		$.getJSON(lastCommentAction({lectureId: ${lecture.id}, commentId: lastComment}), function(data) {
			$.each(data, function (key, value) {
				lastComment = value.id;
				var deleteLink = "";
				if (value.postedBy.name == "${user.name}") {
					deleteLink = "<a href='" + deleteCommentAction({lectureId: ${lecture.id}, commentId: value.id}) + "'>delete</a>";
				}
				content = "<span>" + value.id + "# " + value.postedAt + " - " + value.postedBy.name + ": " + value.content + " " + deleteLink + "</span><br>";
				$('#comments').prepend(content);
			});
			
		});
	}
	
	$(document).ready(function(){
		displayComments()
		
		$("#send").click(function() {
  			var message = $('#message').val();
        	$('#message').val('');
        	$.post(addNewCommentAction({lectureId: ${lecture.id}, content: message}));
        	displayComments();
		});
		
		$('#message').keypress(function(e) {
	        if(e.charCode == 13 || e.keyCode == 13) {
				$('#send').click()
				e.preventDefault()
			}
		})
	})
	
	setInterval('displayComments()', 5000);
	 
</script>

<div class="content">
	<div id="breadcrumb">
		<a href="@{Courses.index}">Courses</a> → <a href="@{Courses.show(lecture.course.id)}">${lecture.course.name}</a> → ${lecture.name}
	</div>
	
	<h1>${lecture.name}</h1>
	
	<div id="leftColumn">
	
		Positive: ${lecture.getUpvoteCount()} - Negative: ${lecture.getDownvoteCount()} 
		<a href="@{Votes.lectureUpVote(lecture.id)}"><img src="@{'public/images/thumbsUp.png'}" alt="vote up"></a> <a href="@{Votes.lectureDownVote(lecture.id)}"><img src="@{'public/images/thumbsDown.png'}" alt="vote down"></a>

		<div id="newMessage">
			<label for="newComment">Posting as ${user.name}</label><br>
    		<input type="text" id="message" autocomplete="off">
    		<input type="submit" value="send" id="send">
		</div>
		
		<!-- filled by javascript -->
		<div id="comments">
		</div>
	</div>
	
	<div id="rightColumn">
		<div id="questions">
		<h2>Questions for this lecture</h2>
		
		<ul>
		#{list items:lecture.questions, as:'question'}
			#{if question.answered}
				<li><a href="@{Answers.show(question.id)}">${question.title}</a> - answered
			#{/if}
			#{else}
			<li><a href="@{Questions.show(question.id)}">${question.title}</a>
			#{/else}
		#{/list}
		</ul>
		</div>
	</div>
	
</div>